$(function () {

  allUersInfo()
  // 获取所有的用户信息
  function allUersInfo() {
    $.ajax({
      url: baseUrl + '/users',
      success(res) {
        // 渲染到模板
        res.forEach(item => {
          if (item.avatar) {
            if (!item.avatar.includes('http')) {
              item.avatar = baseUrl + item.avatar
            }
          }
        })
        const newHtml = template('allUserInfo', { result: res })
        $('.userInfo').html(newHtml)
        // 删除用户

        handleDelete()
        handleEdit()
      },
      error(err) {
        console.log(err);
      }
    })
  }

  upFile()
  // 头像上传
  function upFile() {
    $('#feature').on('change', function () {
      console.log('111');
      // file 是input框返回的一个文件数组
      let file = this.files[0]
      // 使用formData进行文件上传
      let form = new FormData()
      //将数据添加进去
      form.append('image', file)
      $.ajax({
        url: baseUrl + '/upload',
        type: 'POST',
        data: form,
        // 告诉$.ajax 不对请求参数处理
        processData: false,
        // 告诉$.ajax方法不要设置参数类型
        contentType: false,
        success(res) {
          $('.addUserImg').attr('src', '');
          console.log($('#avatar').val(res[0].image));
          $('#avatar').val(res[0].image)
          // 显示图片
          $('.addUserImg').attr('src', baseUrl + res[0].image);
        },
        error(err) {
          console.log(err);
        }

      })
    })
  }
  // 添加用户
  addUser()
  function addUser() {
    $('.addUser').on('submit', function () {
      const form = $(this).serialize()

      $.ajax({
        url: baseUrl + '/users',
        type: 'post',
        data: form,
        success(res) {
          location.reload()
          allUersInfo()
        },
        error(err) {
          console.log(err);
        }
      })

      return false
    })
  }

  // 删除用户
  function handleDelete() {
    let id
    // 点击删除按钮时
    $('.handle .delete-btn').click(function () {
      id = $(this).attr('data-id')
      // 显示模态框
      $('.modul').addClass('show').removeClass('hide')
    })
    // 点击弹出框时
    $('.modul .content .delete').click(function () {
      $.ajax({
        url: baseUrl + '/users/' + id,
        type: 'delete',
        success(res) {
          $('.modul').removeClass('show').addClass('hide')
          location.reload()
          allUersInfo()
        },
        error(err) {
          console.log(err);
        }
      })
    })
  }


  // 编辑用户
  function handleEdit() {
    $('.edit-btn').click(function () {
      let id = $(this).attr('data-id')
      $.ajax({
        url: baseUrl + '/users/' + id,
        success(res) {
          if (res.avatar == "" || res.avatar == null) {
            res.avatar = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.E9RHxvIQO0NMMWZ2zDIsUgAAAA?w=164&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'
          } else if (res.avatar.includes('http')) {
            res.avatar = res.avatar
          }
          else {
            res.avatar = baseUrl + res.avatar
          }

          const newHtml = template('editUserInfo', { result: res })
          $('.user').html(newHtml)
          upFile()
          // 点击事件
          $('.editUser').on('submit', function () {
            const form = $(this).serialize()
            console.log(form);
            $.ajax({
              url: baseUrl + '/users/' + id,
              type: 'put',
              data: form,
              success(res) {
                console.log(res);
                location.href = 'login.html'
                allUersInfo()
              },
              error(err) {
                console.log(err);
              }
            })

            return false
          })
        }
      })
    })
  }


  // 取消删除
  $('.modul .cancel').click(function () {
    $('.modul').removeClass('show').addClass('hide')
  })

})